<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
    <th:block th:include="include :: header('日期和时间')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: header('Summernote富文本编辑器')"/>
    <th:block th:include="include :: summernote-css"/>
</head>
<body class="white-bg">
<div class="ibox float-e-margins">
    <div class="ibox-title ">
        <h5>工单发布</h5>
        <div class="ibox-content ">
            <form class="form-horizontal" method="post" action="/order/order_issue">
                <div class="form-group">
                    <label class="col-sm-4 control-label">工单类型</label>
                    <div class="col-sm-2">
                        <input name="type" type="text" id="type" required placeholder="工单类型" class="form-control">
                        <input id="order_content" required name="orderContent" type="hidden" placeholder="工单内容"
                               class="form-control">
                    </div>
                    <button class="btn btn-info " id="chooseType" type="button"><i class="fa fa-paste"></i>快速选择</button>
                </div>

                <div class="form-group">
                    <label class="col-sm-4 control-label">客户信息</label>
                    <div class="col-sm-1">
                        <input name="customerName" id="customerName" required type="text" placeholder="客户姓名"
                               class="form-control">
                    </div>
                    <div class="col-sm-2">
                        <input name="customerPhone" id="customerPhone" required type="text" placeholder="客户电话"
                               class="form-control">
                    </div>
                    <button class="btn btn-info " onclick="selectCustomer()" type="button"><i class="fa fa-paste"></i>快速选择

                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label"></label>
                    <div class="col-sm-2">
                        <input name="customerAddress" id="customerAddress" required type="text" placeholder="客户地址"
                               class="form-control">
                    </div>
                    <div class="col-sm-2">
                        <input name="customerLinkman" id="customerLinkman" required type="text" placeholder="客户联系人"
                               class="form-control">
                    </div>
                    </button>

                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">接单人</label>
                    <div class="col-sm-2">
                        <select id="selectWork" name="workerId" class="form-control">
                            <option value="">--请选择接单技术员--</option>
                            <option th:each="worker:${workers}" th:value="${worker.userId}"
                                    th:text="${worker.userName}+'  ('+${worker.phonenumber}+')'"></option>
                        </select>
                        <span class="font-bold">不选则由技术员自己承接</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">工单标题</label>
                    <div class="col-sm-2">
                        <input required name="orderTitle" type="text" placeholder="工单标题" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">工单费用</label>
                    <div class="col-sm-2">
                        <input name="orderMoney" required type="number" placeholder="工单费用" class="form-control"
                               value="0">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-4 control-label">开始时间</label>
                    <div class="col-sm-2">
                        <div class="input-group date">
                            <div class="input-group date">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input required name="orderStartTime" type="text" class="form-control"
                                       id="laydate-demo-3"
                                       placeholder="yyyy-MM-dd HH:mm:ss">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">结束时间</label>
                    <div class="col-sm-2">
                        <div class="input-group date">
                            <div class="input-group date">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input required name="orderEndTime" type="text" class="form-control" id="laydate-demo-4"
                                       placeholder="yyyy-MM-dd HH:mm:ss">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h1>任务详情</h1>
                                <h3>(可编辑图片,编辑完必须点保存再提交!!!)</h3>
                                <button class="btn btn-primary btn-xs m-l-sm" onclick="edit()" type="button">编辑</button>
                                <button class="btn btn-primary  btn-xs" onclick="save()" type="button">保存</button>
                            </div>
                            <div class="ibox-content" id="eg">
                                <div class="click2edit wrapper">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-6">
                        <button type="submit" onclick="return submitForm()" style="width: 100%"
                                class="btn btn-w-m btn-lg btn-primary">提交工单
                        </button>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-select-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: summernote-js"/>

<script th:inline="javascript">
    $(document).ready(function () {
        $('.summernote').summernote({
            lang: 'zh-CN'
        });
        $('.click2edit').summernote({
            lang: 'zh-CN',
            height: 150
        });
        var tip = [[${tip}]];
        if (tip != null && tip != '') {
            $.modal.msgSuccess(tip)
        }

    });

    function edit() {
        $("#eg").addClass("no-padding");
        $('.click2edit').summernote({
            lang: 'zh-CN',
            focus: true
        });
    }

    function save() {
        $("#eg").removeClass("no-padding");
        var aHTML = $('.click2edit').summernote('code');
        $('.click2edit').summernote('destroy');
        $('#order_content').val(aHTML)
    }

    function submitForm() {
      /*  if ($('#selectWork').val() == '') {
            $.modal.msgError('提交失败,请选择接单人');
            return false;
        }*/
        if ($('#order_content').val() == '') {
            $.modal.msgError('提交失败,请输入任务内容');
            return false;
        }
        save()
        return true
    }

    $("#chooseType").click(function () {
        var btn = ['<i class="fa fa-check"></i> 选择', '<i class="fa fa-close"></i>  关闭'];
        var options = {
            title: '选择类型',
            width: "400",
            height: "400",
            url: "/order/type",
            btn: btn,
            callBack: setType
        };
        $.modal.openOptions(options);
    })

    function del(index, layero) {
        alert(1)
    }

    function setType(index, layero) {
        var type = layero.find("iframe")[0].contentWindow.$('#type').val();
        console.log("type: " + type)
        $('#type').val(type)
        layer.close(index);
    }

    function selectCustomer() {
        var btn = ['<i class="fa fa-check"></i> 确定', '<i class="fa fa-close"></i> 关闭'];
        var options = {
            title: '选择客户~',
            width: "900",
            height: "620",
            url: "/customer",
            btn: btn,
            callBack: setCustomer
        };
        if ($.common.isMobile()) {
            let availHeight = screen.availHeight*0.7;
            let availWidth = screen.availWidth*0.9;
            options = {
                title: '选择客户~',
                width: availWidth,
                height: availHeight,
                url: "/customer",
                btn: btn,
                callBack: setCustomer
            };
        }

        $.modal.openOptions(options);
    }

    function setCustomer(index, layero) {
        var table = layero.find("iframe")[0].contentWindow.$.table;
        console.log(table)
        let customerName = table.selectColumns("customerName");
        if (customerName.length != 1) {
            $.modal.msgError("请选中一条数据")
            return
        }
        let customerAddress = table.selectColumns("customerAddress");
        let customerPhone = table.selectColumns("customerPhone");
        let customerLinkman = table.selectColumns("customerLinkman");
        $("#customerName").val(customerName);
        $("#customerPhone").val(customerPhone);
        $("#customerAddress").val(customerAddress);
        $("#customerLinkman").val(customerLinkman);
        layer.close(index);
    }


    $(function () {

        <!-- datetimepicker示例 -->
        $("#datetimepicker-demo-1").datetimepicker();

        $("#datetimepicker-demo-2").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("#datetimepicker-demo-3").datetimepicker({
            format: "yyyy-mm-dd hh:ii:ss",
            autoclose: true
        });

        $('.form_date').datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("#datetimepicker-startTime").datetimepicker({
            format: 'yyyy-mm-dd',
            minView: "month",
            todayBtn: true,
            autoclose: true,
            endDate: new Date(),
        }).on('changeDate', function (event) {
            event.preventDefault();
            event.stopPropagation();
            var startTime = event.date;
            $('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
        });

        $("#datetimepicker-endTime").datetimepicker({
            format: 'yyyy-mm-dd',
            minView: "month",
            todayBtn: true,
            autoclose: true,
            endDate: new Date(),
        }).on('changeDate', function (event) {
            event.preventDefault();
            event.stopPropagation();
            var endTime = event.date;
            $("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);
        });

        <!-- laydate示例 -->
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            laydate.render({
                elem: '#laydate-demo-1'
            });

            laydate.render({
                elem: '#laydate-demo-2',
                type: 'date'
            });

            laydate.render({
                elem: '#laydate-demo-3',
                type: 'datetime',
                trigger: 'click'
            });

            laydate.render({
                elem: '#laydate-demo-4',
                type: 'datetime',
                trigger: 'click'
            });
            /* laydate.render({
                 elem: '#laydate-demo-4',
                 range: true
             });*/

            var startDate = laydate.render({
                elem: '#laydate-startTime',
                max: $('#laydate-endTime').val(),
                theme: 'molv',
                trigger: 'click',
                done: function (value, date) {
                    // 结束时间大于开始时间
                    if (value !== '') {
                        endDate.config.min.year = date.year;
                        endDate.config.min.month = date.month - 1;
                        endDate.config.min.date = date.date;
                    } else {
                        endDate.config.min.year = '';
                        endDate.config.min.month = '';
                        endDate.config.min.date = '';
                    }
                }
            });

            var endDate = laydate.render({
                elem: '#laydate-endTime',
                min: $('#laydate-startTime').val(),
                theme: 'molv',
                trigger: 'click',
                done: function (value, date) {
                    // 开始时间小于结束时间
                    if (value !== '') {
                        startDate.config.max.year = date.year;
                        startDate.config.max.month = date.month - 1;
                        startDate.config.max.date = date.date;
                    } else {
                        startDate.config.max.year = '';
                        startDate.config.max.month = '';
                        startDate.config.max.date = '';
                    }
                }
            });
        });
    });
    // 富文本操作
</script>
</body>


</html>